import { defineComponent, reactive, ref } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import ButtonView from "@/components/ButtonView";
import Message from "@/components/Message";
import GoodsListItem from "@/components/GoodsListItem";
import { ILabelProps } from "@/components/Label/types";
import {
  IFilterMenuChoose,
  IFilterMenuPropsData,
} from "@/components/FilterMenu/types";
import Search from "@/components/Search";
import FilterMenu from "@/components/FilterMenu";
import ListView from "@/components/ListView";
import BrandedGoods from "@/components/BrandedGoods";
import { useRequest } from "./request";
import { useRouter } from "vue-router";
import apiTool, {
  getUserTypeValue,
  getUserInfoUrl,
  isDh,
  phoneNumControl,
} from "@/command/apiTool";
import BackgroundPlate from "@/components/BackgroundPlate";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import LabelGroup from "@/components/LabelGroup";
import RoundImg from "@/components/RoundImg";
import phoneIcon from "@/assets/image/phone_icon.png";
import BrandInfo from "@/components/BrandInfo";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import MessageCard from "@/components/MessageCard";

export default defineComponent({
  name: "",
  setup() {
    const { myBrandInfo, newInfo, agreeOrReject, page } = useRequest();
    const router = useRouter();
    const form = ref({});
    const render1 = () => {
      const labels: ILabelProps[] = [
        {
          name: "品牌",
          type: "yellow",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: myBrandInfo.value.majorName + "类别可使用",
          type: "blue",
        },
      ];
      return (
        <CardView
          title={getUserTypeValue() == "dh" ? "我的品牌" : "大户品牌"}
          // class="pb-[20px]"
          // class="relative pb-[20px]"
        >
          <div class="relative flex items-center pb-[10px]">
            <BrandInfo
              phone={myBrandInfo.value.phone}
              text={myBrandInfo.value.introduce}
              desc={myBrandInfo.value.address}
              labels={labels}
              types={myBrandInfo.value.majorName ? textLables : undefined}
              type={getUserTypeValue() == "dh" ? "edit" : "normal"}
              src={myBrandInfo.value.logoUrl}
              title={myBrandInfo.value.name}
              onBottomClick={() =>
                router.push(`/brandApplication?id=${myBrandInfo.value.id}`)
              }
            />
            {/* 如果是大户显示编辑按钮 */}
            {getUserTypeValue() == "dh" && (
              <div
                class="absolute right-[-10px] top-[-20px] w-[42px] h-[24px] flex  items-center justify-center text-[10px] text-[#999999]"
                style={{
                  borderRadius: "16px 0px 0px 16px ",
                  backgroundColor: "#EBEBEB",
                }}
                onClick={() =>
                  router.push(`/myBrand?id=${myBrandInfo.value.id || ""}`)
                }
              >
                编辑
              </div>
            )}
          </div>
        </CardView>
      );
    };
    // 小户
    const render2xh = () => {
      let maskedPhoneNumber = phoneNumControl(newInfo.value.phone);
      let messages = [
        {
          text: `用户${maskedPhoneNumber}通过平台存储了农产品${newInfo.value.typeName}`,
          time: newInfo.value.beforeTime,
        },
      ];
      return <MessageCard data={messages} />;
    };
    // 大户
    const render6dh = () => {
      return (
        <CardView
          title="授权记录"
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push("/authorizationRecord")}
            >
              查看
            </div>
          )}
        ></CardView>
      );
    };
    const render6xh = () => {
      return (
        <CardView
          title="申请记录"
          right={() => (
            <div
              class="blue-text"
              onClick={() => router.push("/authorizationRecord")}
            >
              查看更多
            </div>
          )}
        ></CardView>
      );
    };
    const render2 = () => {
      return render2xh();
    };
    const renderItem = (e: any) => {
      const labels: ILabelProps[] = [
        {
          name: "品牌",
          type: "tagOrange",
        },
      ];
      const textLables: ILabelProps[] = [
        {
          name: e.majorName + "类别可使用",
          type: "blue",
        },
      ];
      const data = [
        {
          display: getUserTypeValue() == "dh",
          name: "包装类型",
          value: e.packTypeName,
          width: "40%",
        },
        {
          display: getUserTypeValue() == "dh",
          name: "需求数量",
          value: e.applyNum,
          width: "40%",
        },
        {
          display: getUserTypeValue() !== "dh",
          name: "",
          value: e.introduce,
          width: "100%",
        },
      ].filter((e) => (e.display == undefined ? true : e.display));
      if (getUserTypeValue() == "dh") {
        const buttons: IButtonGroupViewData[] = [
          {
            text: "拒绝",
            type: "primary",
            plain: true,
            onClick: () => {
              agreeOrReject(e.id, "2");
            },
          },
          {
            text: "同意申请",
            type: "primary",
            onClick: () => {
              agreeOrReject(e.id, "1");
            },
          },
        ];
        return (
          <div class="flex flex-col w-full">
            <RoundInfo src={e.logoUrl} title={e.userName} data={data} />
            <GreyBlock class="mt-[12px]">
              <RowView class="justify-between flex-1">
                <RowView>
                  <TextView>主营业务: {e.produceTypeName}</TextView>
                </RowView>
                <RoundEdgeButtonGroup data={buttons} />
              </RowView>
            </GreyBlock>
            <Divider />
          </div>
        );
      } else {
        return (
          <div
            class="flex flex-col w-full"
            onClick={() => router.push(`/brandDetails?id=${e.id}`)}
          >
            <RoundInfo
              labels={labels}
              src={e.logoUrl}
              title={e.name}
              data={data}
              v-slots={{
                bottomLable: () => (
                  <LabelGroup data={textLables} class={"mt-[9px]"} />
                ),
              }}
            />
            <GreyBlock class="mt-[12px]">
              <RowView class="justify-between flex-1">
                <RowView>
                  <TextView>{e.address}</TextView>
                </RowView>
                <RowView class="text-[12px] flex">
                  <Text class="text-[#FE8923] mr-[4px]">{e.useNum}</Text>
                  <Text>人最近使用</Text>
                </RowView>
                <RoundImg
                  src={phoneIcon}
                  onClick={() => {
                    apiTool.phoneClick(e.phone);
                  }}
                />
              </RowView>
            </GreyBlock>
            <Divider />
          </div>
        );
        /* <BrandedGoods
            type={getUserTypeValue() == "dh" ? "dh" : "xh"}
            img={e.logoUrl}
            title={e.name}
            itemData={{
              introduce: e.introduce,
              majorName: e.majorName,
              useNum: e.useNum,
              address: e.address,
            }}
            labelData={labelData}
          /> */
      }
    };
    const render3 = () => {
      const data1: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "major", title: "农产类型" },
      ];
      const data2: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "major" },
      ];
      return (
        <CardView title={getUserTypeValue() == "dh" ? "申请列表" : "品牌列表"}>
          <FilterMenuSearch
            choose={getUserTypeValue() == "dh" ? data1 : data2}
            v-model={form.value}
            searchKey="name"
          />
          <ListView
            {...getUserInfoUrl({
              // dh: "/api/H5/sell/brand/small/listBrand",
              dh: "/api/H5/sell/brand/heavy/listApply",
              xh: "/api/H5/sell/brand/small/listBrand",
            })}
            type="page"
            ref={page}
            renderItem={renderItem}
            params={form.value}
          />
        </CardView>
      );
    };
    const renderBk = () => {
      return <BackgroundPlate class="h-[227px]" />;
    };
    const renderBody = () => {
      return (
        <div class="box-border ">
          <div class="p-[12px] m-child-top-20">
            {myBrandInfo.value.id && render1()}
            {isDh() && render6dh()}
            {!isDh() && render6xh()}
            {getUserTypeValue() !== "dh" && render2()}
          </div>
          {render3()}
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="帮品牌">
          {/* {renderBk()} */}
          {renderBody()}
        </PageTitle>
      );
    };
  },
});
